<template>
	<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		<img class="logo" src="../assets/src=http___i0.qhimg.com_dmsmty_350_200__t01d269f7a305bcc96f.jpg&refer=http___i0.qhimg.jpg"/>
		<el-menu-item index="1">
			<span></span>
			<el-icon>
				<House />
			</el-icon>
			<router-link to="shouye">主页</router-link>
		</el-menu-item>
		<el-menu-item index="2">
			<el-icon>
				<Menu />
			</el-icon>
			<router-link to="jigsaw">拼图列表</router-link>
		</el-menu-item>
		<el-menu-item index="3">
			<el-icon>
				<Coin />
			</el-icon>
			<router-link to="blindbox">盲盒列表</router-link>
		</el-menu-item>
		<el-sub-menu index="4">
			<template #title>
				<el-icon>
					<User />
				</el-icon>
			个人中心
			</template>
			<router-link to="user"><el-menu-item index="2-1" @click="personalCenter()">个人信息</el-menu-item></router-link>
			<el-menu-item @click="logout()" index="2-2">退出登录</el-menu-item>
		</el-sub-menu>
		<el-avatar :src="imagetouxiang"></el-avatar>
	</el-menu>
	<div class="content">
		<router-view />
	</div>
</template>

<script>
	export default {
		data(){
			return{
				imagetouxiang:""
			}
		},
		mounted(){
			this.tupian();
		},
		methods: {
			logout(){
				this.$router.push({
					path: '/login'
				})
			},
			tupian(){
				this.$axios.post('/user/seltupain')
					.then(data => {
						this.imagetouxiang = data.result.user.avatar;
					})
			}
		}
	}
</script>

<style scoped>
	.el-menu-demo{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}
	
	.logo{
		width: 140px;
		height: 60px;
	}
</style>
